<div class="row clearfix" [@SimpleAnimate]="'fadeIn'">
    <div class="col-md-12 column">
        <div class="box-inner">
            <div class="well box-header tool_bar_header" style="padding-top: 5px">
                <button (click)="back()" type="button" class="btn btn-sm btn-default">
                    <i class="glyphicon glyphicon-arrow-left">返回</i>
                </button>
            </div>
            <div class="box-content">
                <div class="container">
                    <div class="row clearfix">
                        <form class="example-form" role="form">
                            <div class="col-md-8 column">
                                <div class="form-group has-feedback" [ngClass]="{'has-error': userName.invalid, 'has-success': !userName.invalid}">
                                    <label>人员姓名</label>
                                    <input #userName="ngModel" name="user.userName" [(ngModel)]="user.userName" class="form-control" placeholder="人员姓名" type="text"
                                        required>
                                    <span class="glyphicon glyphicon-ok form-control-feedback" *ngIf="!userName.invalid"></span>
                                    <span class="glyphicon glyphicon-remove form-control-feedback" *ngIf="userName.invalid"></span>
                                </div>
                                <div class="form-group has-feedback" [ngClass]="{'has-error': phoneNumber.invalid, 'has-success': !phoneNumber.invalid}">
                                    <label>手机号码</label>
                                    <input #phoneNumber="ngModel" name="user.phoneNumber" [(ngModel)]="user.phoneNumber" class="form-control" placeholder="手机号码"
                                        type="text" pattern="^1(3[0-9]|4[57]|5[0-35-9]|7[0135678]|8[0-9])\d{8}$" (blur)="checkPhoneNumber()"
                                        required>
                                    <span class="glyphicon glyphicon-ok form-control-feedback" *ngIf="!phoneNumber.invalid"></span>
                                    <span class="glyphicon glyphicon-remove form-control-feedback" *ngIf="phoneNumber.invalid"></span>
                                    <div *ngIf="phoneNumberIsRepeated" class="alert alert-danger alert-dismissable">手机号码重复</div>
                                </div>
                                <div class="form-group">
                                    <label>详细地址</label>
                                    <input name="user.address" [(ngModel)]="user.address" class="form-control" placeholder="详细地址" type="text">
                                </div>
                                <div class="form-group">
                                    <label>帐号状态</label>
                                    <mat-radio-group name="user.accountStatus" [(ngModel)]="user.accountStatus">
                                        <mat-radio-button value="0">可用</mat-radio-button>
                                        <mat-radio-button value="1">禁用</mat-radio-button>
                                    </mat-radio-group>
                                </div>
                                <div class="form-group">
                                    <label>头像</label>
                                    <div>
                                        <button type="button" (click)="selectGoodsImage()" class="btn btn-success btn-sm">点击选择头像</button>
                                    </div>
                                    <app-img-cropper [showModal]="showModal" [aspectRatio]="1" (changeObj)="onShowModalChange($event)" (pictureObj)="pictureChange($event)"></app-img-cropper>
                                    <div class="goods-img" *ngIf="imageUrl">
                                        <img [src]="imageUrl">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8 column" *ngIf="items.length > 0">
                                <label>人员角色</label>
                                <div class="box-inner">
                                    <div class="box-content">
                                        <div class="container">
                                            <div class="row clearfix">
                                                <div class="col-md-8 column">
                                                    <ngx-treeview [config]="config" [items]="items" (selectedChange)="onSelectedChange($event)"></ngx-treeview>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8 column">
                                <hr>
                                <button type="button" (click)="save()" class="btn btn-success" [ngClass]="{'disabled': userName.invalid || phoneNumber.invalid || phoneNumberIsRepeated}">保存</button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>